<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
                             'Microsoft YaHei', Arial, 'sans-serif';
        }
        li{
            list-style: none;
        }
        /* 代码主体 */
        .list{
            width: 1140px;
            height: 420px;
            background-color: #162b75;
            margin: 100px auto 0;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        /* 上 */
        .list h1{
            line-height: 50px;
            color: #fff;
            font-size: 48px;
            text-align: center;
            font-weight: normal;
            margin: 40px 0 77px;
        }
        /* 下-列表 */
        .list ul{
            height: 193px;
            /* background: lightblue; */
        }
        .list ul li{
            width: 173px;
            height: 193px;
            /* box-shadow: 0 0 3px #f00; */
            float: left;
            /* 鼠标悬停变手 */
            cursor: pointer;
        }
        .list ul li:nth-of-type(1),
        .list ul li:nth-of-type(3),
        .list ul li:nth-of-type(5){
            margin-right: 20px;
        }
        .list ul li:nth-of-type(2),
        .list ul li:nth-of-type(4){
            margin-right: 21px;
        }
        /* 图片 */
        .list ul li img{
            width: 173px;
            height: 173px;
            display: block;
        }
        /* 描述 */
        .list ul li p{
            color: rgba(171, 163, 163, 100);
            line-height: 20px;
            font-size: 14px;
            text-align: center;
            /* 过渡 */
            transition: color .8;
        }
        /* 初始化隐藏图片2 */
        .list ul li img:nth-of-type(2){
            display: none;
            /* 过渡 */
            transition: all .8s;
            /*
                考点：不是所有的状态变化都可以添加过渡
                例如：可以描述的状态变化（可以度量的）才可以进行过渡设置
                        宽度100----200、高度2000------3000
                    但是从无到有不可以度量和描述
            */
        }
        /* 鼠标悬停 */
        .list ul li:hover p{
            color: #fff;
        }
        .list ul li:hover img:nth-of-type(1){
            display: none;
        }
        .list ul li:hover img:nth-of-type(2){
            display: block;
            transform: translateY(-10px);
        }
    </style>
</head>
<body>
    <!-- 容器盒子 -->
    <div class="list">
        <!-- 上-标题 -->
        <h1>探索更多园区</h1>
        <!-- 下-列表 -->
        <ul>
            <li>
                <img src="./imgs/minons_regular_default-min.png" alt="">
                <img src="./imgs/minons_hover-min.png" alt="">
                <p>小黄人公园</p>
            </li>
            <li>
                <img src="./imgs/hp_default-min.png" alt="">
                <img src="./imgs/hp_hover-min.png" alt="">
                <p>哈利·波特的魔法世界™</p>
            </li>
            <li>
                <img src="./imgs/ww_default-min.png" alt="">
                <img src="./imgs/ww_hover-min.png" alt="">
                <p>未来水世界</p>
            </li>
            <li>
                <img src="./imgs/jw_default-min.png" alt="">
                <img src="./imgs/jw_hover-min.png" alt="">
                <p>侏罗纪世界努布拉岛</p>
            </li>
            <li>
                <img src="./imgs/trans_default-min.png" alt="">
                <img src="./imgs/trans_hover-min.png" alt="">
                <p>变形金刚基地</p>
            </li>
            <li>
                <img src="./imgs/hollywood_default-min.png" alt="">
                <img src="./imgs/hollywood_hover-min.png" alt="">
                <p>好莱坞</p>
            </li>
        </ul>
    </div>
</body>
</html>